html,body{
    width: 100%;
    height: 100%;
}
.jd_layout{
    width: 100%;
    height: 100%;
    background-color: #ccc;
}

.jd_header{
    width: 100%;
    height: 50px;
    background-color: #ddd;
    position: absolute;
    border-bottom:1px solid #ccc;
}

.jd_back,
.jd_menu{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    background-image: url("../images/sprites.png");
    background-repeat: no-repeat;
    background-size: 200px 200px;

    /*添加padding样式*/
    padding:15px;
    /*设置背景填充的原点:从内容区域开始填充*/
    background-origin: content-box;
    /*裁切不需要展示的内容区域：设置的是裁切，控制的是显示*/
    background-clip: content-box;
}
.jd_back{
    background-position: -22px 0px;
    left: 0;
}
.jd_menu{
    background-position: -60px 0px;
    right: 0;
}
.jd_header > form{
    width: 100%;
    padding: 0px 50px;
}
.jd_header > form > input{
    width:100%;
    height:40px;
    margin-top:5px;
    border-radius: 4px;
    padding-left:5px;
    font-size: 16px;
}

.jd_content{
    width: 100%;
    height: 100%;
    padding-top: 50px;
}

.jd_left{
    width: 100px;
    height: 100%;
    float: left;
    overflow: hidden;
}
.jd_left  > ul{
    width:100%;
}
.jd_left  > ul > li{
    width:100%;
    height: 50px;
}
.jd_left  > ul > li > a{
    width:100%;
    height: 100%;
    display: block;
    line-height: 50px;
    text-align: center;
    background-color: #eee;
    border-right:1px solid #aaa;
    border-bottom: 1px solid #aaa;
    color: #444;
}
.jd_right{
    height: 100%;
    overflow: hidden;
    background-color: purple;
}
.jd_left  > ul > li.active >a{
    background-color: #fff;
    color: #e92322;
    border-right:none;
    border-bottom: none;
}